import {UploadOutlined,} from '@ant-design/icons';

import {Card, Col, Input, message, Row, Select, Upload} from 'antd';
import React, {useState} from 'react';
import {Button, Form, Space} from 'antd/lib';
import TextArea from "antd/lib/input/TextArea";
import {genChartByAiMqUsingPost} from "@/services/mybi/chartController";

const AddChart: React.FC = () => {
  const [submiting, setSubmiting] = useState<boolean>(false)
  const [form] = Form.useForm()
  const onFinish = async (values: any) => {
    console.log('Received values of form: ', values);
    if (submiting) {
      return;
    }
    setSubmiting(true);
    const params = {
      ...values,
      file: undefined
    }
    try {
      const res = await genChartByAiMqUsingPost(params, {}, values.file.file.originFileObj);
      console.log(res)
      message.success("任务提交成功，请到图表管理页面查看！");
      form.resetFields()
    } catch (e: any) {
      message.error("分析失败！" + e)
    }
    setSubmiting(false);
  };

  // @ts-ignore
  return (
    <div className={"add-chart"}>
      <Row gutter={24}>
        <Col span={24}>
          <Card title={"智能分析"}>
            <Form
              labelAlign={"left"}

              name="chartAdd"
              form={form}
              onFinish={onFinish}

            >
              <Form.Item label="Plain Text">
                <span className="ant-form-text">China</span>
              </Form.Item>

              <Form.Item name="goal" label="分析诉求" rules={[{required: true, message: '分析诉求必填'}]}>
                <TextArea placeholder={"请输入您的分析诉求，比如：分析网站的流量增长情况"}/>
              </Form.Item>

              <Form.Item name="name" label="图表名称" rules={[{required: true, message: '分析名称必填'}]}>
                <Input placeholder={"请输入您图表名称"}/>
              </Form.Item>

              <Form.Item
                name="chartType"
                label="图表类型"
                hasFeedback
              >
                <Select placeholder="请选择图表类型"
                        options={[
                          {label: '柱状图', value: '柱状图'},
                          {label: '折线图', value: '折线图'},
                          {label: '饼图', value: '饼图'},
                          {label: '雷达图', value: '雷达图'},
                          {label: '散点图', value: '散点图'},
                          {label: '堆叠图', value: '堆叠图'},
                        ]}
                >

                </Select>
              </Form.Item>

              <Form.Item
                name="file"
                label="文件上传"
              >
                <Upload name="logo" maxCount={1}>
                  <Button icon={<UploadOutlined/>}>上传Excel文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{span: 16, offset: 4}}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submiting} disabled={submiting}>
                    智能AI分析
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default AddChart;
